<template>
  <div class="baby">
    <div class="app-container">
      <br />
      <div>
        <el-descriptions
          title="欢迎来到个人信息中心"
          direction="vertical"
          :column="2"
          border
        >
          <el-descriptions-item label="用户名">{{
            userInfo.username
          }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{
            userInfo.name
          }}</el-descriptions-item>
          <el-descriptions-item label="权限" :span="2">
            <el-tag size="small" v-if="userInfo.roles[0] == 'SYSTEM'"
              >管理员</el-tag
            >
            <el-tag size="small" v-if="userInfo.roles[0] == 'ADMIN'"
              >超级管理员</el-tag
            >
            <el-tag size="small" v-if="userInfo.roles[0] == 'USER'"
              >普通用户</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            userInfo.telephone
          }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{
            userInfo.email
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <br />
      <div>
        <el-row>
          <el-button type="primary" @click="updatePwd">修改密码</el-button>
          <el-button type="success" @click="updateInfo">修改个人信息</el-button>
          <el-button type="warning" @click="updateEmail">修改邮箱</el-button>
          <el-button type="info" @click="restPwd">重置密码</el-button>
        </el-row>
      </div>
      <!-- 修改密码=============================================== -->
      <el-dialog title="修改密码" :visible.sync="updatePwdVisible">
        <el-form :model="pwdForm" label-width="80px">
          <el-form-item label="原密码">
            <el-input v-model="pwdForm.rawPass" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="pwdForm.newPass" type="password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitPwd">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改个人信息============================================ -->
      <el-dialog title="修改个人信息" :visible.sync="updateInfoVisible">
        <el-form :model="userInfo" label-width="80px" ref="userInfoRef">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="userInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userInfo.username"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="telephone">
            <el-input v-model="userInfo.telephone"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitUserInfo">确 定</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-dialog>
      <!-- 修改邮箱=============================================== -->
      <el-dialog title="修改邮箱" :visible.sync="updateEmailVisible">
        <el-form
          :model="emailForm"
          :rules="emailRules"
          ref="emailRef"
          label-width="80px"
        >
          <el-form-item label="邮箱">
            <el-input v-model="emailForm.email">
              <el-button slot="append" @click="getCode()">{{
                isRun ? `验证码(${runTime}s)` : `获取验证码`
              }}</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="emailForm.code"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitEmail">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="重置密码" :visible.sync="restPwdDia">
        <el-form :model="restPwdForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="restPwdForm.username">
              <el-button slot="append" @click="getCodeUser()">{{
                isRun ? `验证码(${runTime}s)` : `获取验证码`
              }}</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="restPwdForm.code"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitRestPwd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  update,
  getInfo,
  getCode,
  changeEmail,
  changePass,
  logout,
  resetPass,
  getCodeByUsername,
} from "@/api/user";
export default {
  data() {
    return {
      userInfo: {},
      token: "",
      updatePwdVisible: false,
      updateInfoVisible: false,
      updateEmailVisible: false,
      emailForm: {
        email: "",
        code: "",
      },
      // 邮箱表单
      emailRules: {},
      runTime: 300,
      isRun: false,
      // 密码表单
      pwdForm: {
        newPass: "",
        rawPass: "",
      },
      restPwdDia: false,
      restPwdForm: {
        username: "",
        code: "",
      },
    };
  },
  mounted() {
    this.token = sessionStorage.getItem("token");
    this.getUserInfo();
  },

  methods: {
    // 获取用户数据
    getUserInfo() {
      getInfo(this.token).then((res) => {
        if (res.code == 200) {
          this.userInfo = res.data;
        }
      });
    },
    // 重置密码
    restPwd() {
      this.restPwdDia = true;
    },
    async submitRestPwd() {
      let res = await resetPass(this.restPwdForm);
      if (res.code == 200) {
        this.restPwdDia = false;
        this.$message.success(res.msg);
      }
    },
    // 修改密码
    async logout() {
      await logout();
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
      location.reload();
    },
    updatePwd() {
      this.updatePwdVisible = true;
    },
    submitPwd() {
      changePass(this.pwdForm).then((res) => {
        if (res.code == 200) {
          this.updatePwdVisible = false;
          this.$message.success(res.msg + "，请重新登录");
          this.logout();
        }
      });
    },
    // 修改个人信息
    updateInfo() {
      this.updateInfoVisible = true;
    },
    // 提交用户信息
    submitUserInfo() {
      update(this.userInfo).then((res) => {
        console.log(res);
        this.updateInfoVisible = false;
        this.getUserInfo();
      });
    },
    // 修改邮箱
    updateEmail() {
      this.updateEmailVisible = true;
    },
    getCode() {
      if (this.isRun) return; //如果开始倒计时
      this.isRun = true;
      this.autoTimer = setInterval(() => {
        if (this.runTime === 0) {
          this.runTime = 300;
          this.isRun = false;
          // 清除定时器
          clearInterval(this.autoTimer);
          return;
        }
        this.runTime--;
      }, 1000);
      if (this.runTime === 300) {
        getCode({ address: this.emailForm.email }).then((res) => {
          if (res.code == 200) {
            console.log(res);
          }
        });
      }
    },
    getCodeUser() {
      if (this.isRun) return; //如果开始倒计时
      this.isRun = true;
      this.autoTimer = setInterval(() => {
        if (this.runTime === 0) {
          this.runTime = 300;
          this.isRun = false;
          // 清除定时器
          clearInterval(this.autoTimer);
          return;
        }
        this.runTime--;
      }, 1000);
      if (this.runTime === 300) {
        getCodeByUsername({ username: this.restPwdForm.username }).then(
          (res) => {
            if (res.code == 200) {
              console.log(res);
            }
          }
        );
      }
    },
    submitEmail() {
      changeEmail(this.emailForm).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.updateEmailVisible = false;
          this.getUserInfo();
        }
      });
    },

    // 重置
    resetForm() {
      this.$refs.userInfoRef.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.baby {
  background-image: url("../../assets/image/3.jpg") no-repeat;
}
</style>
